<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轻聘-登录</title>
    <link rel="stylesheet" href="/hire/css/user/login/login.css">
    <link rel="stylesheet" href="/hire/plugins/layui/css/layui.css">
    <link rel="icon" href="/hire/imgs/favicon.ico" type="image/x-icon"/>
</head>

<body>
<div id="app">
    <div class="login_port">
        <h1>轻聘</h1><span>&nbsp|&nbsp欢迎使用轻聘&nbsp&nbsp</span>
    </div>
    <div id="login-box">
        <div class="login_method">
            <button type="button" class="current">密码登录</button>
            <button type="button">手机登录</button>
            <button type="button">邮箱登录</button>
        </div>

        <div id="mypwd">
            <form class="layui-form" action="#" id="login_pwd" style="display: block;">
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/username.png" style="width: 25%;">&nbsp;&nbsp;用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model.trim="username" name="username" id="username" lay-verify="required"
                               placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/pwd.png" style="width: 25%;">&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;码</label>
                    <div class="layui-input-inline">
                        <input type="password" v-model.trim="password" id="password" name="password" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="login-button">
                    <button type="button" @click='loginByPwd'>登录</button>
                </div>
            </form>
        </div>

        <div id="myphone">
            <form class="layui-form" action="#" id="login_phone" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/phone.png" style="width: 25%;">&nbsp;&nbsp;手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model.trim="phone" id="phone" name="phone" lay-verify="required"
                               placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" @click.prevent="sendPhone">发送验证码</button>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/pwd.png"
                                                         style="width: 25%;">&nbsp;&nbsp;验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model.trim="phoneCode" id="phoneCode" name="code" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="login-button">
                    <button type="button" @click="loginByPhone">登录</button>
                </div>
            </form>
        </div>


        <div id="myemail">
            <form class="layui-form" action="#" id="login_email" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/email.png" style="width: 25%;">&nbsp;&nbsp;&nbsp;邮&nbsp;&nbsp;箱</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model.trim="email" name="email" id="email" lay-verify="required"
                               placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" @click.prevent="sendEmail">发送验证码</button>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><img src="/hire/imgs/pwd.png"
                                                         style="width: 25%;">&nbsp;&nbsp;验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model.trim="emailCode" name="code" id="emailCode" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="login-button">
                    <button type="button" @click="loginByEmail">登录</button>
                </div>
            </form>
        </div>
        <div class="regist"><span>没有轻聘账号|</span><a href="/hire/register">立即注册</a></div>
    </div>
</div>

<script src="/hire/plugins/jquery/jquery.min.js"></script>
<script src="/hire/plugins/layui/layui.js"></script>
<script src="/hire/plugins/vue/vue.js"></script>
<script src="/hire/plugins/vue/axios.min.js"></script>
<script src="/hire/js/user/login.js"></script>


</body>
</html>